<template>
    <div class="folderDetail">
        <el-form :model="porjectDetail" :rules="rules" ref="ruleForm" class="FolderDetail">
            <el-form-item prop="title">
                <el-input class="textStyle" v-model="porjectDetail.title" placeholder="项目名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input class="textStyle" type="textarea" resize="none" maxlength="1000" show-word-limit
                    placeholder="项目简介" v-model="porjectDetail.description" :autosize="{ minRows: 20, maxRows: 20}">
                </el-input>
            </el-form-item>
            <el-form-item style="text-align: right;">
                <el-button type="primary" @click="update" icon="el-icon-edit">更新</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import { mapState } from 'vuex'

    export default {
        props: ['porject', 'closeEvent'],
        data() {
            return {
                porjectDetail: {
                    projectId: '',
                    title: '',
                    description: '',
                    ownerUser: '',
                },
                rules: {
                    title: [
                        { required: true, message: '请输入项目名称', trigger: 'blur' },
                    ],
                },
            }
        },
        computed: {
            ...mapState("theme", {
                theme: state => state.theme,
            }),
        },
        mounted() {
            this.renderData();
        },
        methods: {
            renderData() {
                this.porjectDetail = JSON.parse(JSON.stringify(this.porject));
            },
            update() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('是否更新项目信息？', '提示', {
                            customClass: this.theme
                        }).then(async _ => {
                            var updateProjectres = await this.ClientApi.project.updateProject({
                                title: this.porjectDetail.title,
                                description: this.porjectDetail.description,
                                projectId: this.porjectDetail.projectId,
                            });
                            if (updateProjectres.type == 'success') {
                                this.closeEvent('projectUpdate', {
                                    title: this.porjectDetail.title,
                                    description: this.porjectDetail.description
                                });
                            } else {
                                this.$message({
                                    message: '更新项目信息失败',
                                    type: 'warning'
                                });
                            };
                        }).catch(_ => { });
                    } else {
                        return false;
                    }
                });
            }
        },
    }
</script>

<style scoped>
    .FolderDetail {
        width: 90%;
        margin: 20px auto;
    }
</style>